<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>生鲜商城</title>
    <!-- 引入样式 -->
    <link
            rel="stylesheet"
            href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <style>
        .image {
            width: 100%;
            height: 250px;
            display: block;
        }

        .button {
            padding: 0;
            float: right;
            display: inline-block;
            height: 50px;
            width: 120px;
            background-color: #ED2553;
            color: #ffffff;
            font-size: 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<el-container id="app">
    <el-header style="height: 510px">
        <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
        >
            <div class="demo-image">
                <div class="block" :key="img.headbg">
                    <el-image
                            style="width: 1920px; height: 440px"
                            :src="img.headbg"
                            :fit="img.headbg">
                    </el-image>
                </div>
            </div>
            <el-menu-item index="11">首页</el-menu-item>
            <el-menu-item index="22">商品</el-menu-item>
            <el-menu-item index="33">限时秒杀</el-menu-item>
            <el-menu-item index="44">领券中心</el-menu-item>
            <el-menu-item index="55">
                <a href="/loginAndRegister" target="_blank" v-if="user==null">登录/注册</a>
                <a href="/myCenter" v-else v-text="user.userName" style="color: #ED2553">{{user.userName}}}</a>
            </el-menu-item>
        </el-menu>
        <div class="line"></div>
    </el-header>
    <el-main style="margin-top: 6px;">
        <!--        此处开始自定义代码-->
        <el-tabs value="a" v-model="activeName" :tab-position="tabPosition" @tab-click="handleClick">
            <el-tab-pane v-for="h in header" :label="h.title">
<!--                <el-form :inline="true" left  class="demo-form-inline" style="height: 70px;margin-left: 0px; margin-bottom: 0px">-->
<!--                    <el-input style="width: 20%" v-model="input" placeholder="请输入内容"></el-input>-->
<!--                    <el-form-item style="height: 50px; margin-bottom: 0px">-->
<!--                        <el-button type="primary" @click="onSubmitOrders">查询</el-button>-->
<!--                    </el-form-item>-->

<!--                </el-form>-->


                <el-form :inline="true"  class="demo-form-inline">
                    <el-form-item label="商品名称">
                        <el-input v-model="productName" placeholder="商品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="商品类型">
                        <el-input v-model="productType" placeholder="商品类型"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>


                <el-col :span="12" style="width:400px;margin-left: 70px; margin-top: 30px;" v-for="p in productData">
                    <el-card :body-style="{ padding: '0px' }">
                        <img style="width:85%;margin:0 auto" :src="p.productImgUrl" class="image">
                        <div style="padding: 20px;">
                            <span style="font-size: 20px;color: red;font-weight: bold">￥</span>
                            <span style="font-size: 40px;color: red;font-weight: bold">{{p.productPrice}}</span><span
                                class="time"
                                style="font-size: 30px;color: red;font-weight: bold">{{p.productName}}</span>
                            <!--v-text="couponCash.couponDiscount"-->
                            <div><span class="time"
                                       style="font-size: 10px;color: yellowgreen;font-weight: bold">满</span>
                                <span style="font-size: 10px;color: yellowgreen;font-weight: bold">100</span>
                                <!--v-text="couponCash.couponThreshold"-->
                                <span class="time"
                                      style="font-size: 10px;color: yellowgreen;font-weight: bold">元可用</span>
                            </div>
                            <div class="bottom clearfix">
                                <time class="time" style="line-height: 50px;font-size: 16px">
                                    <!--v-text="couponCash.couponName"-->
                                </time>
                                <span>现金抵扣券</span>
<!--                                <el-button class="button el-icon-check" plain>买！商家血亏</el-button>-->
                                <el-button class="button el-icon-check" type="text" @click="getProductId(p.productId)">
                                    买！商家血亏
                                </el-button>

                                <el-dialog title="商品购买" :visible.sync="dialogFormVisible" :modal-append-to-body="false">
                                    <el-form :model="form">
                                        <el-form-item label="购买数量" >
                                            <el-input v-model="form.num" auto-complete="off"></el-input>
                                        </el-form-item>

                                    </el-form>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                                        <el-button type="primary" @click="addData(p)" v-bind:dialogFormVisible="dialogFormVisible" >确 定</el-button>
                                    </div>
                                </el-dialog>
                            </div>
                        </div>
                    </el-card>
                </el-col>

            </el-tab-pane>

        </el-tabs>
        <el-pagination
                background
                layout="prev, pager, next"
                :current-page="pageIndex"
                :total="pageCount" :page-size="4"
                @current-change="jump"
        >
        </el-pagination>
    </el-main>
</el-container>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            user: {
                userId: '',
                userName: '',
            },
            dialogFormVisible: false,
            productId:'',
            form:{
                num:'',
            },
                productName:'',
                productType:'',

            pageCount:0,
            pageIndex:1,

            product: {
                name: '',
            },
            activeName: "",
            activeIndex: "22",
            productType: [],
            header: [{title:'全部'},{title: '水果'}, {title: '蔬菜'}, {title: '海鲜'}, {title: '肉类'}, {title: '禽蛋'}, {title: '乳品'}],
            img: {
                headbg: '/img/bg/banner3.jpg',
                fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
            },
            productData: [],
            label: '',
            tabPosition: 'left',
        },
        methods: {
            handleClick: function (ins) {
                var vm = this;
                // alert(vm.activeName)
                 var v=vm.header[this.activeName].title
                if(v=="全部"){
                    // alert(1)
                    axios.get("/productAll" ).then(function (resp) {
                        console.log(resp)
                        vm.productData = resp.data.data
                    })
                }else {
                    // alert(2)
                    axios.get("/productBytype", {params: {productType: vm.header[this.activeName].title}}).then(function (resp) {
                        vm.productData = resp.data.data
                    })
                }

            },
            getProductId:function(productId){
                this.dialogFormVisible = true;
                this.productId= productId;
            },
            addData:function(p){
                var vm=this;
                vm.dialogFormVisible=false;
                // alert(vm.form.num)
                let userId = null
                if(vm.user !== null){
                    userId=vm.user.userId;
                }
                axios.get("/freshmarket/shopping-car/addCar",{params:{userId:userId,productId:vm.productId,productNum:vm.form.num}}).then(function (resp) {
                    if(resp.data.success==undefined){
                        window.location.href="/loginAndRegister"
                    }
                })
            },

            onSubmit:function() {
                var vm=this;
                axios.get("/selectByTypeandName",{params:{productName:vm.productName,productType:vm.productType}}).then(function (resp) {
                    console.log(resp)
                    vm.productData = resp.data.data.records
                    vm.pageCount=resp.data.data.total
                    vm.pageIndex=resp.data.data.current

                })

            },
            jump:function(i){
            var vm=this;
            // alert(i)
            axios.get("/selectByTypeandName",{params:{pageIndex:i,productName:vm.productName,productType:vm.productType}}).then(function (resp) {
                // console.log(resp)
                vm.productData = resp.data.data.records
                vm.pageCount=resp.data.data.total
                vm.pageIndex=resp.data.data.current

            })
            },

            handleSelect: function (key, keyPath) {
                if(key==11){
                    window.location.href="/"
                }else if(key==22){
                    window.location.href="/toProduct"
                }else if(key==33){
                    window.open("/KillProduct")
                }else if(key==44){
                    window.location.href="/couponCenter"
                }
            },
        },
        mounted: function () {
            var vm = this;
            // alert(vm.header[0].title)
            axios.get("/selectByTypeandName").then(function (resp) {
                vm.productData = resp.data.data.records
                vm.pageCount=resp.data.data.total
                vm.pageIndex=resp.data.data.current
                // console.log(resp)
            })
            $.ajax({
                url: "/freshmarket/user/islogin",
                type: "get",
                success: function (data) {
                    // console.log(data);
                    vm.user = data.data;
                }
            });
        },
    });
</script>
</body>
</html>
